- max_topic_title_length = 30
- detail_page_link = topic_explore_projects_cleaned_path(topic_name: topic.name)

%li.gl-items-center{ class: '!gl-flex' }
  = render Pajamas::AvatarComponent.new(topic, size: 32, alt: '')

  .gl-min-w-0.gl-grow.gl-ml-3
    .gl-font-bold
      = link_to detail_page_link do
        - if topic.title_or_name.length > max_topic_title_length
          = truncate(topic.title_or_name, length: max_topic_title_length)
        - else
          = topic.title_or_name
    - if topic.description
      .gl-text-sm.md.gl-truncate{ class: '*:!gl-text-subtle *:!gl-m-0' }
        = first_line_in_markdown(topic, :description, 200)

  .stats.gl-text-subtle.gl-shrink-0.gl-hidden{ class: "@sm/panel:gl-flex" }
    %span.has-tooltip{ title: n_('%d project', '%d projects', topic.total_projects_count) % topic.total_projects_count }
      = sprite_icon('chart', css_class: 'gl-align-text-bottom')
      = number_with_delimiter(topic.total_projects_count)
